<template>
  <div class="charts-container">
    <div id="myChart1" class="chart"></div>
    <div id="myChart2" class="chart"></div>
    <div id="myChart3" class="chart"></div>
    <div id="myChart4" class="chart"></div>
    <div id="myChart5" class="chart"></div>
    <div id="myChart6" class="chart"></div>
  </div>


</template>

<script>
import axios from "axios";
import * as echarts from "echarts";

export default {
  name:'admins',
  data() {
    return {

    };
  },
  async mounted() {
    await this.initChart1();
    await this.initChart2();
    await this.initChart3();
    await this.initChart4();
    await this.initChart5();
    await this.initChart6();

  },
  methods: {
    // 原有图表1 - 各岗位招聘人数
    initChart1() {
  var mychart = echarts.init(document.getElementById('myChart1'));
  var jobNames = [];
  var jobCounts = [];

  return axios.get("http://62.234.193.187:8081/echarts/echarts/echart1")
    .then(function (res) {
      var response = res.data.res;
      for (var i = 0; i < response.length; i++) {
        jobNames.push(response[i].job_title);
        jobCounts.push(response[i].count);
      }

      mychart.setOption({
        title: {
          text: '各岗位招聘人数',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 阴影指示器
          }
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 人'
          }
        },
        yAxis: {
          type: 'category',
          data: jobNames,
          axisLabel: {
            interval: 0 // 确保标签显示不重复
          }
        },
        series: [{
          name: '招聘人数',
          type: 'bar',
          data: jobCounts,
          itemStyle: {
            // 设置渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#0000FF' }, // 蓝色
              { offset: 1, color: '#FFEB3B' }  // 黄色
            ])
          },
          barWidth: 30, // 设置条形的宽度
        }]
      });
    })
    .catch(function (error) {
      console.error('请求失败:', error);
      alert('获取“各岗位招聘人数”数据失败，请稍后重试。');
    });
}

 ,

    // 原有图表2 - 各岗位薪资分布（环形图）
    initChart2() {
      var mychart = echarts.init(document.getElementById('myChart2'));
      var data = [];
      return axios.get("http://62.234.193.187:8081/echarts/echarts/echart2")
        .then(function (res) {
          var response = res.data.avg;
          var jobName = response.map(item => item.job_title);
          for (var i = 0; i < response.length; i++) {
            var d = { name: '', value: 0 };
            d.name = response[i].job_title;
            d.value = response[i].avg;
            data.push(d);
          }
          data.sort((a, b) => (a.value - b.value));

          mychart.setOption({
            title: { text: '各岗位占比', left: 'center' },
            tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
            legend: { left: 'center', top: 'bottom', data: jobName },
            series: [{
              name: 'Radius Mode',
              type: 'pie',
              radius: ['30%', '70%'], // 环形图设置
              label: { show: true, position: 'outside' },
              labelLine: { show: true },
              data: data
            }]
          });
        })
        .catch(function (error) {
          console.error('请求失败:', error);
          alert('获取“各岗位薪资分布”数据失败，请稍后重试。');
        });
    },

    // 新图表3 - 各公司招聘岗位数量（堆叠柱状图）

    initChart3() {
      var mychart = echarts.init(document.getElementById('myChart3'));
      axios.get("http://62.234.193.187:8081/echarts/echarts/jobViewApplyStats")
        .then(function (res) {
          const response = res.data.jobStats;
          const jobNames = response.map(item => item.job_Title);
          const viewCounts = response.map(item => item.view_Count);
          const applyCounts = response.map(item => item.apply_Count);

          mychart.setOption({
            title: {
              text: '各岗位浏览与申请统计',
              left: 'center',
              top: '5%'  // 设置标题距离顶部的间距，避免与图例重叠
            },
            tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
            legend: {
              data: ['浏览次数', '申请次数'],
              top: '15%',  // 设置图例距离顶部的间距，避免与标题重叠
              left: 'center'
            },
            xAxis: {
              type: 'category',
              data: jobNames,
              axisLabel: { interval: 0, rotate: 45 }
            },
            yAxis: { type: 'value' },
            series: [
              {
                name: '浏览次数',
                type: 'bar',
                stack: '总量', // 堆叠
                data: viewCounts
              },
              {
                name: '申请次数',
                type: 'bar',
                stack: '总量', // 堆叠
                data: applyCounts
              }
            ]
          });
        })
        .catch(function (error) {
          console.error('请求失败:', error);
          alert('获取“各岗位浏览与申请统计”数据失败，请稍后重试。');
        });
    }
    ,

    // 新图表4 - 薪资分布统计（Polar 坐标系柱状图）
    initChart4() {
  var mychart = echarts.init(document.getElementById('myChart4'));
  var salaryRanges = [];
  var jobCounts = [];

  return axios.get("http://62.234.193.187:8081/echarts/echarts/salaryDistributionStats")
    .then(function (res) {
      var response = res.data.salaryStats;

      // 提取薪资范围和岗位数量
      for (var i = 0; i < response.length; i++) {
        salaryRanges.push(response[i].salary_Range);
        jobCounts.push(response[i].job_Count);
      }

      mychart.setOption({
        title: {
          text: '薪资区间与岗位数量堆叠柱状图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var tooltip = `${params[0].name}<br/>`;
            params.forEach(function (item) {
              tooltip += `${item.seriesName}: ${item.value}<br/>`;
            });
            return tooltip;
          }
        },
        xAxis: {
          type: 'category',
          data: salaryRanges, // 显示薪资范围
          axisLabel: {
            rotate: 45, // 可以旋转标签避免重叠
            interval: 0 // 保证所有标签显示
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 岗位'
          }
        },
        legend: {
          top: '10%',
          data: ['岗位数量']
        },
        series: [{
          name: '岗位数量',
          type: 'bar',
          stack: '总量', // 堆叠
          data: jobCounts,
          label: {
            show: true,
            position: 'inside'
          },
          itemStyle: {
            color: '#4CAF50' // 柱状图颜色
          }
        }]
      });
    })
    .catch(function (error) {
      console.error('请求失败:', error);
      alert('获取“薪资分布统计”数据失败，请稍后重试。');
    });
}

    ,

    // 新图表5 - 公司招聘岗位统计（条形图）
    initChart5() {
  var mychart = echarts.init(document.getElementById('myChart5'));
  var companyNames = [];
  var jobCounts = [];

  return axios.get("http://62.234.193.187:8081/echarts/echarts/companyJobStats")
    .then(function (res) {
      var response = res.data.companyJobStats;
      for (var i = 0; i < response.length; i++) {
        companyNames.push(response[i].company_Name);
        jobCounts.push(response[i].jobCount);
      }

      mychart.setOption({
        title: {
          text: '公司招聘岗位统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 岗位'
        },
        xAxis: {
          type: 'category',
          data: companyNames,
          axisLabel: {
            rotate: 45,
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 岗位'
          },
          interval: 1 // 设置纵坐标刻度间隔为1
        },
        series: [{
          name: '招聘岗位数',
          type: 'scatter',
          data: companyNames.map((name, index) => ({
            name: name,
            value: [companyNames[index], jobCounts[index]]
          })),
          symbolSize: 10,
          itemStyle: {
            color: '#4E9E99'
          }
        }]
      });
    })
    .catch(function (error) {
      console.error('请求失败:', error);
      alert('获取“公司招聘岗位统计”数据失败，请稍后重试。');
    });
}
    ,

    // 新图表6 - 技能熟练度分布（圆角环形图）
    initChart6() {
      var mychart = echarts.init(document.getElementById('myChart6'));
      var skillNames = [];
      var proficiencyLevels = {
        "入门": 1,
        "熟练": 2,
        "高级": 3,
        "精通": 4
      };

      var skillsData = {};
      return axios.get("http://62.234.193.187:8081/echarts/echarts/jobSkillStats")
        .then(function (res) {
          var response = res.data.jobSkillStats;

          // 提取技能名称并进行分类
          response.forEach(function (item) {
            var skillName = item.skill_Name;
            if (!skillsData[skillName]) {
              skillsData[skillName] = [];
              skillNames.push(skillName); // 收集所有技能名称
            }
            skillsData[skillName].push(proficiencyLevels[item.proficiencyLevel]);
          });

          // 计算每个技能的平均熟练度，并准备数据用于圆角环形图
          var pieData = skillNames.map(function (skill) {
            var totalProficiency = skillsData[skill].reduce((a, b) => a + b, 0);
            var averageProficiency = totalProficiency / skillsData[skill].length;
            return {
              name: skill,
              value: averageProficiency,
              itemStyle: {
                borderRadius: 15  // 设置圆角
              }
            };
          });

          mychart.setOption({
            title: {
              text: '技能熟练度分布',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}: {c}'
            },
            series: [{
              type: 'pie',
              radius: ['50%', '70%'],  // 圆角环形图的半径
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 15,  // 圆角设置
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: true,
                position: 'outside'
              },
              data: pieData
            }]
          });
        })
        .catch(function (error) {
          console.error('请求失败:', error);
          alert('获取“技能熟练度分布”数据失败，请稍后重试。');
        });
    }
  }
};
</script>

<style scoped>
.charts-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行3个图表 */
  gap: 20px; /* 图表间距 */
  padding: 20px;
}

.chart {
  width: 100%;
  height: 400px;
  border-radius: 10px; /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  background-color: #fff; /* 背景色 */
}
</style>





